<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title></title>
		<link rel="stylesheet" href="css/mui.min.css" />
		<script src="examples/best-practices/list-to-detail/vue.min.js" type="text/javascript" charset="utf-8"></script>
		<style>
			.layout {
				padding: 10px;
			}

			.layout .row {
				margin-bottom: 30px;
			}

			.row img {
				width: 100%;
			}
		</style>
	</head>
	<body>
		<div id="root">
			<header class="mui-bar mui-bar-nav">
				<h1 class="mui-title">测试</h1>
			</header>

			<div class="mui-content">
				<div class="layout">
					<div class="row" v-for="(item,index) in petList" :key="item._id">
						<img :src="item.url" alt="" />
					</div>
				</div>
			</div>

			<nav class="mui-bar mui-bar-tab">
				<a class="mui-tab-item mui-active">
					<span class="mui-icon mui-icon-home"></span>
					<span class="mui-tab-label">首页</span>
				</a>
				<a class="mui-tab-item">
					<span class="mui-icon mui-icon-phone"></span>
					<span class="mui-tab-label">电话</span>
				</a>
				<a class="mui-tab-item">
					<span class="mui-icon mui-icon-email"></span>
					<span class="mui-tab-label">邮件</span>
				</a>
				<a class="mui-tab-item">
					<span class="mui-icon mui-icon-gear"></span>
					<span class="mui-tab-label">设置</span>
				</a>
			</nav>
		</div>

		<script src="js/mui.js" type="text/javascript" charset="utf-8"></script>
		<script src="libs/request.js" type="text/javascript" charset="utf-8"></script>
		<script>
			new Vue({
				el: '#root',
				data() {
					return {
						petList: []
					}
				},
				created() {
					this.getPet()
				},
				methods: {
					getPet() {
						get(Api.index.petShow,{size:10}).then(res => {
							this.petList = res.data
						})
					}
				}
			})
		</script>
	</body>
</html>